<template>
  <div id="home" class="blog-home">
    <ul>
      <li>
        <Carousel autoplay v-model="value1"
                  :autoplay-speed="speed"
                  loop>
          <CarouselItem>
            <div class="Carousel"><img src="../assets/1.jpg"></div>
          </CarouselItem>
          <CarouselItem>
            <div class="Carousel"><img src="../assets/2.jpg"></div>
          </CarouselItem>
        </Carousel>
      </li>
    </ul>
    <ul class="video" v-show="XM.length>0">
      <div class="title">
        <span class="col_block"></span>
        <span class="home_course">热门项目</span>
        <a @click="initVideo(1)" class="fr more_course link_text" v-if="showmore">更多课程</a>
        <a @click="initVideo(0)" class="fr more_course link_text" v-if="showhome">返回首页</a></div>
      <li v-for="tab in XM">
        <div class="content" @click="videoDetail(tab.id)">
          <h4> {{tab.title}} </h4>
          <span>{{tab.introduction}}</span>
        </div>
      </li>
    </ul>

    <ul class="video" v-show="JC.length>0">
      <div class="title"><span class="col_block"></span>
        <span class="home_course">基础课程/工具</span>
        <a @click="initVideo(2)" class="fr more_course link_text" v-if="showmore">更多课程</a>
        <a @click="initVideo(0)" class="fr more_course link_text" v-if="showhome">返回首页</a></div>
      <li v-for="tab in JC">
        <div class="content" @click="videoDetail(tab.id)">
          <h4> {{tab.title}} </h4>
          <span>{{tab.introduction}}</span>
        </div>
      </li>
    </ul>

    <ul class="video" v-show="GJ.length>0">
      <div class="title"><span class="col_block"></span>
        <span class="home_course">微服务/分布式/中间件</span>
        <a @click="initVideo(3)" class="fr more_course link_text" v-if="showmore">更多课程</a>
        <a @click="initVideo(0)" class="fr more_course link_text" v-if="showhome">返回首页</a></div>
      <li v-for="tab in GJ">
        <div class="content" @click="videoDetail(tab.id)">
          <h4> {{tab.title}} </h4>
          <span>{{tab.introduction}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: 1,
        speed: 5000,
        XM: [],
        JC: [],
        GJ: [],
        type: "",
        showhome: false,
        showmore: true
      }
    },
    created() {
      this.initVideo(0);
    },
    methods: {
      videoDetail(code) {
        this.$router.push(`/videoDetail/${code}`)
      },
      initVideo(type) {
        this.type = type;
        this.showhome = false;
        this.showmore = true;
        if (!type==0) {
          this.showhome = true;
          this.showmore = false;
        }
        this.$http.get('/api/course/list', {
          params: {
            type: this.type
          }
        }).then(resp => {
          this.XM = resp.data.XM;
          this.JC = resp.data.JC;
          this.GJ = resp.data.GJ;
        }).catch(err => {
          this.$Message.error('加载数据失败!');
        });
      },
    }
  }
</script>

<style scoped>
  .blog-home {
    background: #fff;
    margin-top: 10px;
  }

  ul li {
    background: #fff;
    margin-top: 10px;
    border: 0px solid red;
    list-style: none;
  }

  .Carousel {
    background: #34B3A0;
  }

  .Carousel img {
    width: 100%;
    height: 100%;
  }

  .video {
    overflow: hidden;
    margin-right: -3%;
  }

  .video .title {
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
    color: #34B3A0;
  }

  .video .title h2 {
    margin-left: 10px;
    margin-top: 10px;
  }

  .video .title .col_block {
    display: inline-block;
    width: 4px;
    height: 24px;
    background: #ffba00;
    position: relative;
    top: 1px;
  }

  .video .title .home_course {
    width: 200px;
    display: inline-block;
    font-size: 16px;
    line-height: 16px;
    color: #1b1b1b;
    margin-top: 10px;

  }

  .video .title .more_course {
    width: 100px;
    display: inline-block;
    font-size: 16px;
    color: #999;
    margin-top: 10px;
  }

  .video .title .fr {
    float: right;
  }

  .video .title .link_text:hover {
    text-decoration: none;
    color: #333;
  }


  .video li {
    width: 30.333%;
    height: 150px;
    float: left;
    border: 1px solid #ccc;
    border-top: 8px solid #2DAAA6;
    margin-right: 3%;
    border-radius: 8px;
  }

  .content {
    margin: 15px 15px;
    cursor: pointer;

  }

  .content h4 {
    color: #1b1b1b;
    float: left;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .content span {
    font-size: 12px;
    width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  @media screen and (max-width: 768px) {
    .video {
      overflow: hidden;
      margin-right: 0%;
    }
    .video li {
      width: 48%;
      height: 100px;
      margin: 1%;
    }


    .content {
      width: 140px;
      height: 50px;
      margin: 5px 5px;
    }

    .content h4 {
      color: #5A5B5E;
      font-weight: bold;
      float: left;
      font-size: 12px;
      margin-bottom: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    .content span {
      font-size: 7px;
      width: 100%;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }


    img {
      width: auto;
      height: 140px;
    }
  }


</style>

